import React, { useEffect, useState } from 'react';
import { Modal } from 'antd';
import Render from '../Render'
import { useRecoilState, useRecoilValue } from 'recoil'
import { designerState } from '../../../store'

export default function Preview () {
  const [preview, setPreview] = useRecoilState(designerState.isPreviewAtom)
  const layoutData = useRecoilValue(designerState.getPageDataByParent(null));
  
  useEffect(() => {
    
  }, [])

  return (
    <Modal
      className='preview'
      style={{padding: '5px'}}
      title="预览"
      centered
      visible={preview}
      onOk={() => setPreview(false)}
      onCancel={() => setPreview(false)}
      width={1200}
    >
      <Render pageData={ layoutData } ></Render>
    </Modal>
  )
}